@import "../../../assets/scss/mixins/utility";
@import "../../../assets/scss/mixins/palette";
@import "../../../assets/scss/global";

.vertical-rule {
  display: inline-block;
  width: 1px;
  height: 20px;
  border-left: 1px solid $silver-50;
  margin-right: 10px;
}

.centered {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -14%;

  &.corrected {
    margin-top: calc(-14% - #{$commandbar-extended-height} + 87px);
  }

  img {
    height: 210px;
  }

  span {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    color: $text-color;
  }
}

th {
  padding-bottom: 14px !important;
  z-index: 1;

  a {
    color: $text-color;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease;

    &:hover {
      opacity: 0.6;
      &.open-web-console {
        &.disabled i {
          opacity: unset !important;
        }
      }
    }
  }
}

i.moon-Table {
  color: $silver-dark;
  font-size: 23px;
  padding-left: 27px;
  position: relative;
  top: 4px;
}

span.vertical-rule {
  margin-right: 0 !important;
  margin-block: -4px !important;
  height: 22px !important;
}

th:nth-child(1) {
  padding-left: 22px !important;
}

.compact th a span.vertical-rule {
  margin-block: -1px !important;
}

.compact i.moon-Table {
  padding-left: 22px;
}

i.moon-Dropdown,
i.moon-Caret-down {
  position: relative;
  top: 3px;
  left: 3px;
  font-size: 16px;
  color: inherit;
  opacity: 0;

  &.ascendent-order-arrow.hidden-arrow {
    display: inline-block;
    opacity: 0 !important;
  }

  &.active-arrow.descendent-order-arrow {
    display: inline-block;
    opacity: 1 !important;
  }

  &.hidden-arrow.descendent-order-arrow {
    display: inline-block;
    opacity: 1 !important;
    transition: all 0.2s ease;
    transform: rotate(180deg);
  }
}

tr .status-item {
  display: inline-block;
}

tr .hover-item {
  display: none;
}

::ng-deep {
  th:hover i.moon-Dropdown.hidden-arrow.ascendent-order-arrow,
  th:hover i.moon-Caret-down.hidden-arrow.ascendent-order-arrow {
    opacity: 1 !important;
  }

  tr:hover {
    .status-item {
      display: none;
    }

    .hover-item {
      display: inline-block !important;
    }
  }
}

.compact.option-bar {
  left: 0;

  .start-session {
    width: 50px !important;
  }
}

.option-bar {
  cursor: initial;
  padding: $standard-padding $standard-padding $standard-padding 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: $white-text-color;
  height: $commandbar-height;
  bottom: 0;
  left: $menubar-width;
  right: 0;
  z-index: 1;
  @include box-shadow(3px -1px 5px -3px $text-color);

  a {
    display: inline-flex;
    margin: 0 10px;

    i {
      color: $medium-dark;
    }

    &:hover {
      i {
        color: #3c3c3c;
        opacity: 1;
      }
    }
  }

  .separator {
    display: inline-flex;
    width: 1px;
    height: 24px;
    background: $silver-50;
    margin: 0 17px;
    position: relative;
    top: 4px;
  }
}

.opt-bar-session-button {
  position: relative;
  top: 2px;
}

.opt-bar-middle-section {
  position: relative;
  left: -43px;

  &.moon-Server {
  }
}

.opt-bar-middle-left-buttons {
  display: inline-block;

  a .moon-Region {
    position: relative;
    left: -6px;
  }

  a .moon-User {
    position: relative;
    left: -3px;
  }
}

.opt-bar-middle-right-buttons {
  display: inline-block;
  margin-left: -5px;

  a .moon-Delete {
    position: relative;
    left: 2px;
  }
}

.azure-opt-bar .opt-bar-middle-section {
  position: relative;
  left: 37px;
}

.awsiamrolefederated-opt-bar .opt-bar-middle-section,
.awsiamrolechained-opt-bar .opt-bar-middle-section {
  position: relative;
  left: -43px;
}

.awsiamuser-opt-bar .opt-bar-middle-section,
.awsssorole-opt-bar .opt-bar-middle-section {
  position: relative;
  left: -23px !important;
}

.icon-button.start-session,
.icon-button.stop-session {
  position: relative !important;
  left: 7px !important;
}

.stop-session i {
  color: $bright-red !important;
}

.start-session i {
  color: $main-color-light !important;
}

.start-session, .stop-session {
  display: inline-flex;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  min-width: 143px !important;
  color: $text-color;

  i {
    font-size: 30px !important;
    margin-right: 15px;
  }
}

.open-web-console {
  position: relative;
  right: 10px;
  &.disabled i {
    opacity: 0.6 !important;
    cursor: initial;
  }
}

.azure-opt-bar .separator {
  visibility: hidden;
}

.session-name {
  position: relative;
  left: -1px;
  color: $silver-dark;
  font-size: 13px;
}
